<!--
 * @Description: 产量统计
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:51:28
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <!-- <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div> -->
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="margin-bottom: 10px; display: inline-block">
                <span style="margin-right: 12px">工程名称</span>
                <el-input
                  v-model="tableParam2.engineeringName"
                  style="width: 220px"
                  placeholder="请输入"
                  @keyup.enter.native="gettableData()"
                />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">浇筑方式</span>
                <el-input
                  v-model="tableParam2.pouringMethod"
                  style="width: 220px"
                  placeholder="请输入"
                  @keyup.enter.native="gettableData()"
                />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">产品名称</span>
                <el-input
                  v-model="tableParam2.productName"
                  style="width: 220px"
                  placeholder="请输入"
                  @keyup.enter.native="gettableData()"
                />
              </span>
              <span style="margin-left: 24px">
                <span style="margin-right: 12px">生产日期</span>
                <el-date-picker
                  v-model="startTimDateEndTimDate"
                  type="datetimerange"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="
                    (tableParam.produceDate = startTimDateEndTimDate
                      ? startTimDateEndTimDate[0]
                      : ''),
                      (tableParam.endProduceDate = startTimDateEndTimDate
                        ? startTimDateEndTimDate[1]
                        : '')
                  "
                ></el-date-picker>
              </span>
              <el-button
                icon="el-icon-search"
                size="medium"
                class="bottom_all but1"
                @click="(tableParam2.page = 1), getData()"
                >查 询</el-button
              >
              <el-button
                size="medium"
                class="bottom_all_two"
                style="margin-left: 12px"
                @click="init()"
                >重 置</el-button
              >
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info">
            <el-table
              ref="table1"
              :header-cell-style="{ background: '#f3f6f9' }"
              border
              style="width: 100%"
              :data="tableData"
              tooltip-effect="dark"
              :span-method="objectSpanMethod"
            >
              <el-table-column
                label="生产日期"
                align="center"
                prop="produceDate"
              ></el-table-column>
              <el-table-column
                label="订单编号"
                align="center"
                prop="orderNo"
              ></el-table-column>
              <el-table-column
                label="产品名称"
                align="center"
                prop="productName"
              ></el-table-column>
              <el-table-column
                label="计划产量（方）"
                align="center"
                prop="pouringNum"
              ></el-table-column>
              <el-table-column
                label="浇筑方式"
                align="center"
                prop="pouringMethod"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.pouringMethod | pouringMethodFilter }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="工程名称"
                align="center"
                prop="engineeringName"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ tableParam2.total }}条</div>
          <el-pagination
            :current-page.sync="tableParam2.page"
            :page-size="tableParam2.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500, 1000]"
            layout="prev,pager,sizes,next,jumper"
            :total="tableParam2.total"
            @size-change="sizeChange"
            @current-change="getData()"
          ></el-pagination>
        </div>
        <div>
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            class="bottom_all_two"
            @click="getData"
            >刷新</el-button
          >
        </div>
      </div>
    </el-container>
  </div>
</template>

<script src="./capacityOfStatistical.js"></script>

<style lang="scss" scoped>
.table_top {
  color: #008000;
}
.table_top:hover {
  color: #008000 !important;
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 320px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}
.table_link:hover {
  opacity: 0.8;
}
</style>
<style lang="scss">
.el-table_3_column_15,
.el-table_1_column_2 {
  padding: 0px !important;
}
.display-row-FzyHeight {
  > td {
    background: #f1f1f1;
  }
}
</style>
